<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ClubHouse - Semana JSExpert 4.0</title>
  <link rel="shortcut icon" type="image/jpeg" href="./../../assets/favicon.jpeg" />
  <link rel="stylesheet" href="./../../css/styles.css" />
  <script>
    if (!window.MediaRecorder1 ||  !window.navigator.mediaDevices?.getUserMedia) {
      document.write(
        decodeURI('%3Cscript defer src="./../../deps/polyfill.js">%3C/script>')
      )
    }
  </script>

</head>

<body>
  <!-- Menu -->
  <nav>
    <a href="./../lobby/index.html" class="back-to-home">
      <i class="fa fa-chevron-down"></i>
      Todas as salas
    </a>
    <div class="menu-icons">
      <img src="./../../assets/icons/file.svg" class="menu-icons__icon" alt="File icon" />
      <div class="avatar">
        <img id="imgUser">
      </div>
    </div>
  </nav>

  <!-- Room -->
  <div class="room-card">
    <p class="room-card__title" id="pTopic"></p>
    <div  class="room-card--align">
      <div id="gridSpeakers" class="room-card__users">
         
      </div>
    </div>
    <p class="room-card__subtitle">
      Outros na sala
    </p>
    <div id="gridAttendees" class="room-card__users">
       
    </div>
  </div>

  <footer class="fixed-footer-white">
    <div class="buttons">
      <button class="btn-room" id="btnLeave">
        <span role="img">✌️</span>
        <p>Leave quietly</p>
      </button>
      <div class="configs-room-buttons">

        <!-- Speaker Room -->
        <button id="btnClipBoard" class="circle-btn-room hidden">
          <i class="fa fa-clipboard"></i>
        </button>

        <!-- Both rooms -->
        <button class="circle-btn-room">
          <i class="fa fa-plus"></i>
        </button>

        <!-- User Room -->
        <button class="circle-btn-room hidden" id="btnClap">
          <img src="./../../assets/icons/hand.svg" id="toggleImage" class="menu-icons__icon" alt="Hands icon" />
        </button>

        <!-- Speaker Room -->
        <button class="circle-btn-room hidden" id="btnMicrophone">
          <i class="fa fa-microphone"></i>
        </button>
      </div>
    </div>
  </footer>

  <!-- Scripts -->
  <script src="https://use.fontawesome.com/8604f653a5.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js" integrity="sha512-eVL5Lb9al9FzgR63gDs1MxcDS2wFu3loYAgjIH0+Hg38tCS8Ag62dwKyH+wzDb+QauDpEZjXbMn11blw8cbTJQ==" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/1.3.2/peerjs.min.js" integrity="sha512-4wTQ8feow93K3qVGVXUGLULDB9eAULiG+xdbaQH8tYZlXxYv9ij+evblXD0EOqmGWT8NBTd1vQGsURvrQzmKeg==" crossorigin="anonymous"></script>
  <script type="module" src="./src/index.js"> </script>
</body>

</html>